<template>

  <div>
    <div id="main">

      <div id="list" style="clear: both;padding: 20px 0 0px 0;">
        <ul style="margin: 0 5px">
          <li style="padding: 0;border: none;margin: 0;">
            <div class="po-avt-wrap">
              <img class="po-avt data-avt" :src="forumById.avatar">
            </div>
            <div class="po-cmt">
              <div class="po-hd">
                <p class="po-name" v-if="forumById.user">
                  <span class="data-name">{{ forumById.user.nickName }}</span>
                </p>
                <div class="post">
                  <p>{{ forumById.remark }}</p>
                  <p v-if="forumById.img && forumById.img.length>0">
                    <img class="list-img" style="height: 80px;"
                         v-if="forumById.img.length>1"
                         v-for="(itemImg,indexImg) in forumById.img" :key="indexImg"
                         :src="itemImg.url">
                    <img v-if="forumById.img.length===1"
                         v-for="(itemImg2,indexImg2) in forumById.img" :key="indexImg2"
                         :src="itemImg2.url">
                  </p>
                </div>
                <p class="time">{{ forumById.createTime }}
                  <span style="padding-left: 5px;"
                        v-if="forumById.user && (forumById.user.userId==user.userId)"
                        @click="btnClick('del',forumById)">删除</span>
                </p>
                <p @click="playClick(forumById)" style="float:right;">
                  <img class="c-icon" src="/static/images/icon/pl.png">
                  <span style="padding-left: 5px">{{ forumById.reply }}</span>
                </p>
              </div>
              <!--评论-->
<!--              <div v-if="replyList.length>0">
                <div class="r"></div>
                <div class="cmt-wrap">
                  <div class="cmt-list">
                    <p v-for="(item,index) in replyList" :key="index">
                      <span>{{ item.fromUser.nickName }}：</span>{{ item.remark }}
                    </p>
                  </div>
                </div>
              </div>-->
            </div>
          </li>
        </ul>


      </div>

      <div style="padding: 0px 15px 80px 15px;">
        <div class="r"></div>
        <div class="cmt-wrap">
          <div class="cmt-list">
            <div id="list2" style="clear: both;padding: 0">
              <ul v-if="replyList.length>0" style="margin: 0 5px">
                <li v-for="(item,index) in replyList" :key="index">
                  <div class="po-avt-wrap">
                    <img class="po-avt data-avt" :src="item.avatar">
                  </div>
                  <div class="po-cmt">
                    <div class="po-hd">
                      <p class="po-name">
                        <span class="data-name">{{ item.fromUser.nickName }}</span>
                      </p>
                      <div class="post">
                        <p>{{ item.remark }}</p>
                        <p v-if="item.img && item.img.length>0">
                          <img class="list-img" style="height: 80px;"
                               v-if="item.img.length>1"
                               v-for="(itemImg,indexImg) in item.img" :key="indexImg"
                               :src="itemImg.url">
                          <img v-if="item.img.length===1"
                               v-for="(itemImg2,indexImg2) in item.img" :key="indexImg2"
                               :src="itemImg2.url">
                        </p>
                      </div>
                      <p class="time">{{ item.createTime }}
                        <span style="padding-left: 5px;"
                              v-if="item.fromUser.userId==user.userId"
                              @click="btnClick('delReply',item,forumById)">删除</span>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
              <div style="padding: 20px;text-align: center;color: #999;">没有更多了</div>
            </div>
          </div>
        </div>
      </div>

      <div
           style="z-index:99999;display: flex;position: fixed; bottom: 0;width:100%;padding-top: 5px;padding-bottom: 5px;background: #ccc;">
        <div
          style="flex: 1;margin-left: 10px;margin-bottom: 0px;background: #fff;border-radius: 5px;line-height: 30px;max-height: 90px;overflow-y:scroll;">
          <van-field
            :value="replyForm.remark"
            type="textarea"
            placeholder="写评论..."
            autosize
            :border="false"
            @input="inputClick"
          />
        </div>
        <button :disabled="showDisa"
                @click="submitFormReply(forumById)"
                style="width: 100px;text-align: center;margin: 5px;margin-top: 0px;margin-bottom: 0px;height: 45px;line-height:43px;border-radius: 5px;font-size: 15px;background-color: #ffbd4a;">
          发表评论
        </button>
      </div>

      <van-dialog id="van-dialog"/>
    </div>

  </div>

</template>

<script>
import {getTrends, delTrends, updateReplyNumberDel, updateReplyNumber} from '@/api/trends'
import {listReply, getReply, addReply, delReply} from '@/api/plainReply'
import {mapGetters} from 'vuex'
import {getToken} from '@/utils/auth'
import {addMessage} from '@/api/message'
import {changeURLIMG} from "@/utils/association"
import Bus from "@/utils/bus";

import Dialog from '@/../static/vant/dialog/dialog'

export default {
  name: 'list',
  data() {
    return {
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        status: '0'
      },
      showDisa: true,
      replyList: [],
      trendsList: [],
      replyForm: {},
      show: false,
      trendsIDDDD: null,
      forumById: []
    }
  },
  computed: {
    ...mapGetters([
      'user', 'avatar'
    ])
  },
  created() {
  },
  mounted() {
    this.trendsIDDDD = this.$root.$mp.query.trendsId;
    this.getList(this.$root.$mp.query.trendsId)
  },
  methods: {
    /** 查询动态列表 */
    async getList(val) {
      await getTrends(val).then(response => {
        this.forumById = response.data
        this.forumById.img = changeURLIMG(this.forumById.img)
        this.forumById.avatar = this.changeAvatar(this.forumById.user.avatar)
        this.forumById.remark = this.formatSolution(this.forumById.remark)
        this.forumById.createTime = this.parseTime(this.forumById.createTime, '{m}-{d} {h}:{i}')
        this.getReplyList(val)
      })
    },

    playClick(val) {
      this.show = !this.show
    },

    formatSolution(val) {
      if (val) {
        let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#')
        newString = newString.replace(/_#_@/g, '\n') // IE7-8
        newString = newString.replace(/_@/g, '\n') // IE9、FF、chrome
        newString = newString.replace(/\s/g, '\t') // 空格处理
        return newString
      } else {
        return val
      }
    },

    //获取评论
    getReplyList(val) {
      let params = {
        // pageNum: 1,
        // pageSize: 10,
        contentId: val,
        status: '0'
      }
      listReply(params).then(response => {
        this.replyList = response.rows
        this.replyList.map(item => {
          item.img = changeURLIMG(item.img)
          item.avatar = this.changeAvatar(item.fromUser.avatar)
          item.remark = this.formatSolution(item.remark)
          item.createTime = this.parseTime(item.createTime, '{m}-{d} {h}:{i}')
        })
      })
    },


    inputClick(val) {
      if (!getToken()) {
        this.setToast({title: "请先登录！"})
        this.$store.dispatch('LogOut').then(() => {
          wx.navigateTo({
            url: '/pages/subpage/login/main'
          })
        })
      } else {
        let value = val.mp.detail
        if (value.trim().length) {
          this.showDisa = false
          this.replyForm.remark = value
        }
      }
    },
    //发布评论
    submitFormReply(val) {
      wx.showLoading({title: "正在发布"});
      this.replyForm.fromId = JSON.parse(JSON.stringify(this.user.userId))
      this.replyForm.contentId = JSON.parse(JSON.stringify(val.trendsId))
      addReply(this.replyForm).then(response => {
        this.setToast({title: '评论成功'});
        this.replyForm = {}
        this.showDisa = true
        // this.getReplyList(val.trendsId)
        updateReplyNumber(val.trendsId).then(() => {
          this.getList(val.trendsId)
        })
        if (val.user.userId == this.user.userId) {
          return
        }
        let message = {
          fromId: this.user.userId,
          fromName: this.user.nickName,
          toId: val.user.userId,
          toName: val.user.userName,
          messageTitle: '动态',
          identity: '1',
          type: '1',
          payload: JSON.stringify(val),
          messageContent: '回复了你的动态'
        }
        addMessage(message)
      })
    },

    btnClick(e, val, data) {
      if (e == 'del') {
        Dialog.confirm({
          message: '确定要删除吗？',
        }).then(() => {
          delTrends(val.trendsId).then(res => {
            this.setToast({title: '删除成功'});
            Bus.$emit('跳转刷新', 'onSave');
            wx.navigateBack({delta: 1});
          })
        }).catch(() => {
          // on cancel
        });
      } else if (e == 'delReply') {
        Dialog.confirm({
          message: '确定要删除吗？',
        }).then(() => {
          delReply(val.replyId).then(res => {
            console.log('删除成功')
            this.setToast({title: '删除成功'});
            // this.getReplyList(data.trendsId)
            updateReplyNumberDel(data.trendsId).then(() => {
              this.getList(data.trendsId)
            })
          })
        }).catch(() => {
        });
      }
    }
  }
}
</script>


<style scoped>
.pinglu {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #ccc;
}

.pinglu_input {
  flex: 1;
  margin-left: 10px;
  margin-bottom: 0px;
  background: #fff;
  border-radius: 5px;
  line-height: 30px;
  max-height: 90px;
  overflow-y: scroll;
}

.pinglu_btn {
  width: 100px;
  text-align: center;
  margin: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  background: #007aff;
}

/**
 * Created by Administrator on 2016/1/31.
 */
#list, #list2, #list2 li, #list li, .po-hd, .post {
  overflow: hidden
}

.po-cmt, .post .list-img:nth-child(1), .time {
  float: left
}

#list li, #list2 li.cmt-wrap, .r, .time {
  clear: both
}

.btn, a {
  cursor: pointer
}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

fieldset, img {
  border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: 400
}

ol, ul {
  list-style: none none
}

caption, th {
  text-align: left
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 400
}

q::after, q::before {
  content: ""
}

abbr, acronym {
  border: 0;
  font-variant: normal
}

sup {
  vertical-align: text-top
}

sub {
  vertical-align: text-bottom
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit
}

legend {
  color: #000
}

a {
  text-decoration: none
}

input {
  -webkit-appearance: none
}

* {
  -webkit-tap-highlight-color: transparent
}

html {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
  font-size: 13px
}

@media screen and (min-width: 350px) {
  html {
    font-size: 15px
  }

  .cmt-wrap {
    font-size: 14px
  }

  .time {
    font-size: 13px
  }
}

.hide {
  display: none
}

header {
  position: relative
}

#avt, #user-name {
  position: absolute
}

#bg {
  width: 100%
}

#user-name {
  text-align: right;
  right: 114px;
  bottom: 15px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px .5px #000
}

#share a, .btn {
  font-size: 14px
}

.btn, b {
  font-weight: 400
}

#share a, #share p, .btn {
  text-align: center
}

#avt {
  width: 74px;
  height: 74px;
  border: 1px solid #dbdbdb;
  right: 15px;
  bottom: -22px;
  padding: 1px;
  background-color: #fff
}

#list li, .po-hd, #list2 li {
  position: relative
}

#list, #list2 {
  padding: 30px 0 10px
}

#list li, #list2 li {
  line-height: 1.5;
  border-bottom: 1px solid #e2e2e2;
  margin-top: 15px;
  padding-bottom: 15px
}

#share a:nth-child(2), .ads, .po-avt {
  position: absolute
}

.ads {
  color: #999;
  right: 5px;
  top: 0
}

.ads img {
  width: 10px;
  padding-left: 8px
}

.ad-link {
  color: #3b5384
}

.post .ad-link img {
  width: 11px;
  padding: 0;
  display: inline-block
}

.po-avt-wrap {
  padding-left: 10px
}

.po-avt {
  width: 40px;
  height: 40px;
  top: 0;
  left: 10px;
  border-radius: 6px;
}

.r {
  border-bottom: 8px solid #eee;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  width: 1px;
  /*margin-top: 5px;*/
  margin-left: 60px;
}

.po-cmt {
  padding-left: 60px;
  padding-right: 10px;
  width: 100%;
  box-sizing: border-box
}

.po-name {
  color: #576b95
}

.post {
  color: #252525;
  padding-bottom: 10px
}

.post img {
  padding: 10px 5px 0 0;
  display: block;
  max-height: 130px;
  max-width: 130px
}

#share a, .btn {
  display: inline-block
}

.post .list-img {
  width: 30%;
  max-height: 80px;
  max-width: 80px;
  padding-right: 5px;
  float: left;
  object-fit: cover
}

.post .list-img:last-child {
  padding-right: 0
}

.time {
  color: #b1b1b1
}

.c-icon {
  /*height: 15px;*/
  /*width: 20px;*/
  height: 18px;
  width: 18px;
  /*float: right*/
}

.cmt-wrap {
  width: 100%;
  background-color: #eee
}

.like {
  color: #576b95;
  padding: 5px 5px 3px 12px
}

.like img {
  height: 12px;
  width: 12px;
  padding-right: 5px
}

.cmt-list {
  padding: 5px 12px;
  color: #454545
}

.cmt-list p {
  padding-top: 3px
}

.cmt-list span {
  color: #3b5384
}

#share a {
  border-radius: 5px;
  background-color: #26337e;
  color: #fff;
  line-height: 2.5;
  width: 138px;
  margin: 0 10px
}

#share a:nth-child(1) {
  position: absolute;
  left: 50%;
  margin-left: -148px
}

#share a:nth-child(2) {
  right: 50%;
  margin-right: -148px
}

#share p {
  padding: 45px 0 10px;
  color: #999
}

#guide {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  /*background-image: url(../images/guide2.png);*/
  background-repeat: no-repeat;
  background-position: right top;
  background-color: #191919;
  background-size: contain;
  opacity: .9
}

.btn {
  margin-bottom: 0;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c
}

.btn-group-lg > .btn, .btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px
}

.btn-block {
  display: block;
  width: 100%
}

.bq {
  width: 13px;
  padding-left: 2px
}

.hidenone {
  display: none
}


.weui_mask_transition {
  display: none;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: background .3s;
  transition: background .3s;
}

.weui_fade_toggle {
  background: rgba(0, 0, 0, 0.6);
}

.weui_actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  width: 100%;
  background-color: #EFEFF4;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
}

.weui_actionsheet_toggle {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.weui_actionsheet_menu {
  background-color: #FFFFFF;
}

.weui_actionsheet_cell:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.weui_actionsheet_cell:first-child:before {
  display: none;
}

.weui_actionsheet_cell {
  position: relative;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
}

.weui_actionsheet_cell.title {
  color: #999;
}

.weui_actionsheet_action {
  margin-top: 6px;
  background-color: #FFFFFF;
}

</style>
